{% extends 'users/user-base.html' %}

{% load static %}
{% block title %}现有分组{% endblock %}
{% block custom_css %}
    <!-- <link href="css/domain.css" rel="stylesheet" title="" type="text/css"/> -->
    <style>
        td{
            vertical-align:middle !important;
        }
        .ibox-tools {
            display: block;
            float: none;
            margin-top: 0;
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 0;
            text-align: right;
        }
        .ibox-title {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            border-color: #e7eaec;
            border-image: none;
            border-style: solid solid none;
            border-width: 2px 0 0;
            color: inherit;
            margin-bottom: 0;
            padding: 15px 90px 8px 15px;
            min-height: 48px;
            position: relative;
            clear: both;
        }
    </style>
{% endblock %}

{% block custom_js %}{% endblock %}

{% block contentworkstation %}
    <script type="text/javascript">
        var groupid;
        $(document).ready(function () {
            var groupid;
            $("#tab").on("click", ":button", function (event) {
                var btn_id = $(this).attr('id');
                if (btn_id == "add_members") {
                    $("#members_id").val("");
                    groupid = $(this).closest("tr").find("td").eq(0).text();
                    $("#AddMembersModal").modal("show");
                }else if (btn_id == "select_members") {
                    groupid = $(this).closest("tr").find("td").eq(0).text();
                    $.ajax({
                        type: "POST",
                        data: {'group_id': groupid},
                        url: "/admins/group_users/1",
                        success: function (data) {
                                if (data) {
                                    window.location.href = '/admins/group_users/1';
                                }
                                else{
                                    alert("失败")
                                }
                        }
                    })
                }
            })

            $('#add_group').click(function () {
                $("#AddGroupModal").modal("show");
            })

            $('#agreeAddGroup').click(function () {
                var group_name = $("#group_name").val()
                if (group_name == "") {
                    alert("请输入组名")
                }else{
                    $.ajax({
                        type: "POST",
                        data: {'group_name': group_name},
                        url: "/admins/add_group/",
                        success: function (data) {
                            window.location.reload();
                        },
                        error: function () {
                            alert("失败");
                        }
                    })
                }
            })

            $('#agreeAddMembers').click(function () {
                var members_id = $("#members_id").val();
                if (members_id == "") {
                    alert("请输入用户id")
                }else{
                    $.ajax({
                        type: "POST",
                        data: {'group_id': groupid, 'members_id': members_id},
                        url: "/admins/add_members/",
                        success: function (data) {
                            $("#AddMembersModal").modal('hide');
                            if(data["st"] == 0){
                                $("#tipbody").text("找不到该用户");
                                $("#tipModal").modal('show');
                            }else{
                                $("#tipbody").text("添加成功");
                                $("#tipModal").modal('show');
                            }
                        },
                        error: function () {
                            alert("失败");
                        }
                    })
                }
            })
        })

    </script>

    <div class="dashboard-wrapper">
        <div class="dashboard-ecommerce">
            <div class="container-fluid dashboard-content ">
                <!-- ============================================================== -->
                <!-- pageheader  -->
                <!-- ============================================================== -->
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="page-header">
                            <h2 class="pageheader-title">现有分组</h2>
                            <div class="page-breadcrumb">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item">用户管理</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">现有分组</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- end pageheader  -->
                <!-- ============================================================== -->

                <div class="row">
                    <!-- ============================================================== -->
                    <!-- basic table  -->
                    <!-- ============================================================== -->
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card">
                            <div class="ibox-title">
                                <h3 style="padding-left: 20px;padding-top: 10px">组列表</h3>
                                <div class="ibox-tools">
                                    <div class="btn-group">
                                        <button type="button" class="btn btngroup-prime" id="add_group">
                                            <span class="glyphicon glyphicon-plus mar-right">
                                                添加分组
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered first" id="tab">
                                        <thead>
                                        <tr>
                                            <th >ID</th>
                                            <th >组名</th>
                                            <th >操作</th>
                                        </tr>
                                        </thead>
                                        <form id="group_list">
                                            {% for group in data %}
                                                <tr>
                                                    <td>{{ group.id }}</td>
                                                    <td>{{ group.gname }}</td>
                                                    <td>
                                                        <button type="button" id="add_members" class="btn btn-success">
                                                            <span class="glyphicon glyphicon-plus"></span>
                                                            添加用户
                                                        </button>
                                                        <button type="button" id="select_members" class="btn btn-primary">
                                                            <span class="glyphicon glyphicon-eye-open"></span>
                                                            查看用户
                                                        </button>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </form>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



{% endblock %}